<template>
    <div class="payment-card-page">
        <!-- 页面头部 -->
        <TopNav
                title="身份信息"
                :showBack="true"
                :showAdd="false"
        />


        <!-- 证件预览区域（模拟） -->
        <div class="card-container">
            <div class="card-item">
                <!-- 身份证人像面占位 -->
                <!--  <div class="card-avatar">
                      <img style="width: 100%" :src="require('@/assets/idcard1.png')" alt="身份证人像面" />
                  </div>-->
                <div class="upload-box" @click="triggerUpload('11')">
                    <img style="width: 100%;height: 70px" :src="previewUrl11" alt="身份证人像面"/>
                    <div class="upload-text">证件正面照</div>
                    <!-- 隐藏的文件选择框 -->
                    <input
                            ref="fileInput11"
                            type="file"
                            accept="image/*"
                            style="display: none"
                            @change="handleFileChange($event,'11')"
                    />
                </div>
            </div>
            <div class="card-item">
                <!-- 身份证国徽面占位 -->
                <div class="upload-box" @click="triggerUpload('00')">
                    <img style="width: 100%;height: 70px" :src="previewUrl00" alt="身份证人像面"/>
                    <div class="upload-text">证件反面照</div>
                    <!-- 隐藏的文件选择框 -->
                    <input
                            ref="fileInput00"
                            type="file"
                            accept="image/*"
                            style="display: none"
                            @change="handleFileChange($event,'00')"
                    />
                </div>
            </div>
        </div>


        <!-- 表单区域 -->
        <van-form
                label-align="top"
                @submit="handleSubmit"
                @failed="handleFormError"
                class="payment-form"
        >

            <!-- 您的姓名 -->
            <van-field
                    v-model="formData.name"
                    name="username"
                    :rules="[{ required: true, message: '请输入您的姓名' }]"
                    class="form-field"
                    placeholder="请输入您的姓名"
            >
                <template #label>
                    您的姓名<span class="required"> *</span>
                </template>
            </van-field>

            <!-- 性别 -->
            <van-field
                    v-model="formData.sexText"
                    name="installment"
                    placeholder="请选择性别"
                    :rules="[{ required: true, message: '请选择性别' }]"
                    readonly
                    is-link
                    clickable
                    @click="showPicker = true"
                    class="form-field"
            >
                <template #label>
                    性别<span class="required"> *</span>
                </template>
            </van-field>


            <!-- 身份证号 -->
            <van-field
                    v-model="formData.idcard"
                    name="username"
                    :rules="[
                        { required: true, message: '请输入您的身份证号' },
                        {
                            pattern: /(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
                            message: '请输入有效的18位身份证号'
                        }
                     ]"
                    class="form-field"
                    placeholder="请输入您的身份证号"
            >
                <template #label>
                    身份证号<span class="required"> *</span>
                </template>
            </van-field>


            <!-- 联系地址 -->
            <van-field
                    v-model="formData.contactAddress"
                    name="cardNumber"
                    placeholder="请输入联系地址"
                    :rules="[{ required: true, message: '请输入联系地址' }]"
                    class="form-field"
            >
                <template #label>
                    联系地址<span class="required"> *</span>
                </template>
            </van-field>


            <!-- 提交按钮 -->
            <div class="form-actions">
                <MyButton text="下一步" />
            </div>
        </van-form>

        <van-action-sheet
                v-model:show="showPicker"
                :actions="sexs"
                @select="onSelect"
        />

    </div>
</template>

<script>
    import TopNav from "@/components/TopNav.vue";
    import MyButton from "@/components/MyButton.vue";
    import {useRoute} from 'vue-router';
    import {toast} from '@/utils/toast';
    import {addUserKyc,uploadFile} from '@/api/index.js'


    export default {
        components: {
            TopNav, // 注册
            MyButton
        },

        data() {
            return {
                productId:'',
                showPicker:false,
                sexs:[{
                    name:'男',
                    value:'10'
                },{
                    name:'女',
                    value:'20'
                }],
                previewUrl11: require('@/assets/idcard11.png'),
                previewUrl00: require('@/assets/idcard00.png'),

                // 初始表单数据
                initialFormData: {
                    idcardFront: '',
                    idcardBack: '',
                    name: '',
                    sex: '',
                    sexText: '',
                    idcard: '',
                    contactAddress: '',
                    idcardValidDate: ''
                },
                formData: {}
            };
        },
        methods: {
            onSelect(item) {
                this.formData.sex = item.value;
                this.formData.sexText = item.name;
                this.showPicker = false;
            },
            // 处理表单提交
            async handleSubmit() {
                if(!this.formData.idcardFront){
                    toast('请上传身份证正面照');
                    return;
                }
                if(!this.formData.idcardBack){
                    toast('请上传身份证反面照');
                    return;
                }
                let res = await addUserKyc(this.formData);
                if (res.code === 200) {
                    this.resetForm();
                    toast("提交成功");
                    this.$router.push(`/userCert/baseInfo?productId=${this.productId}`);
                }
            },
            // 点击容器时，触发隐藏 input
            triggerUpload(type) {
                if (type === '11') {
                    this.$refs.fileInput11.click();
                } else if (type === '00') {
                    this.$refs.fileInput00.click();
                }
            },
            // 选择文件后更新预览
            async handleFileChange(event, type) {
                const file = event.target.files[0];
                console.log('==type',type)
                if (file) {
                    const formData = new FormData();
                    formData.append("file", file);

                    const result = await uploadFile(formData);
                    if (result.code === 200) {
                        if (type === '11') {
                            this.previewUrl11 = result.data;
                            this.formData.idcardFront = this.previewUrl11;
                        } else {
                            this.previewUrl00 = result.data;
                            this.formData.idcardBack = this.previewUrl00;
                        }
                    }
                }
            },
            resetForm() {
                this.formData = { ...this.initialFormData };
            },

        },
        mounted() {
            const route = useRoute();
            let productId = route.query.productId;
            this.productId = productId;
            this.resetForm();
        }
    };
</script>

<style scoped>
    .payment-card-page {
        background-color: #f5f5f5;
        min-height: 100vh;
    }

    .page-header {
        background-color: #ffffff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .payment-form {
        background-color: #ffffff;
        margin-top: 10px;
        padding: 0 16px;
    }

    .card-type-group {
        display: flex;
        padding: 16px 0;
        border-bottom: 10px solid #eee;
    }

    .card-type-item {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .card-icon {
        margin-right: 8px;
        color: #1989fa;
    }

    .form-field {
        border-bottom: 1px solid #eee;
    }

    .form-actions {
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }


    .cancel-btn {
        background-color: transparent;
        color: #666;
    }

    .bank-picker-popup {
        width: 100%;
    }

    .required {
        color: red;
        margin-right: 4px;
    }

    .color-btn {
        background: linear-gradient(90deg, #407fff, #1a60d0);
    }

    /* 确保光标在移动端居中 */
    .van-search__field {
        height: 36px;
        line-height: 36px;
    }

    .van-search__input {
        height: 100%;
        line-height: 36px;
        font-size: 16px;
        padding: 0 10px;
    }

    .identity-info-page {
        padding-top: 16px;
        background-color: #fff;
        min-height: 100vh;
        box-sizing: border-box;
    }

    /* 证件占位容器 */
    .card-container {
        background-color: #fff;
        display: flex;
        justify-content: space-around;
        padding: 16px;
    }

    .card-item {
        width: 50%;
        padding: 3px;
    }

    .card-avatar, .card-nation {
        border-radius: 4px;
        min-height: 120px;
    }

    .upload-box {
        border: 2px dashed #ccc; /* 虚线边框 */
        border-radius: 8px; /* 圆角，可选 */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 10px;
        box-sizing: border-box;
        cursor: pointer;
        background-color: #fff; /* 背景色 */
    }

    .upload-box img {
        max-width: 80%; /* 图片最大宽度 */
        max-height: 70%; /* 图片最大高度 */
        object-fit: contain;
    }

    .upload-text {
        margin-top: 8px;
        font-size: 14px;
        color: #999;
    }


</style>
